Excel？再见！国产免费开源在线表格走红，一键引入，太方便了~
来源：程序员Tools
昨天，老鬼给大家推荐的这款小工具，不知道你去用没有，我用了一下，挺有有意思的，把一些隐藏的功能，直观的展现出来，建议去体验一下~
有的同学可能用过不少在线文档编辑器，比如金山文档，腾讯文档，石墨文档，谷歌doc，这些文档要么未开源，要么收费。
那么，有没有一款开源且免费的产品供我们使用呢？是有的，那便是今天的主角——Luckysheet，开源且免费，功能强大，配置简单。
跟往常一样，咱们先来看效果，见下图：
是不是跟咱们平常用的Excel一样，没啥差别~
基本上具备了大部分Excel的功能，比如格式调整，公式使用，图表等等，但是，它还有一些特有的功能，比如：
矩阵计算；
对选取进行截图；
支持复制为json、array、对角线数据、去重等；
支持密码、水印、公式等的本地导入导出；
支持JPG,PNG,SVG,Pen tool的插入、修改和删除，并且随表格的变动而产生变化；
数据验证，单元格内其它特有的样式；
该项目是基于Javascript编写的，主要依赖于Node.js的开发环境。正由于它这一特性，更加方便它集成其它的前端组件，比如Luckyexcel、chartMix等。
接下来，说说它的设计思路。
老鬼也去看了一些代码，说实话老鬼的js水平有限，但还是能看懂一部分，代码结构挺清晰的，感兴趣的同学也可以去读读，见下图：
其实咱们看到的一个完整的Luckysheet文件，就表示一张表格，里面包含了若干个sheet文件，sheet文件里面包含具体的表格数据，见下图
如果你懂点技术的话，可以打开Chrome的Console，输入如下的代码：
luckysheet.getluckysheetfile()再来看看下面这张图，便一目了然了，见下图
最终，根据用户的操作，组装成之前设计的数据结构来保存起来。思路不难，难得是效果~
如何使用？
1、引入依赖
目前，有两种方案进行引入，具体如下：
1）CDN
这是最快得方案，直接在你的html页面添加如下代码：
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' /><link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' /><link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' /><link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' /><script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script><script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>2）本地引入
需要进行自行构建，把生成的js文件复制到你的项目中，进行引入，如下：
<link rel='stylesheet' href='./plugins/css/pluginsCss.css' /><link rel='stylesheet' href='./plugins/plugins.css' /><link rel='stylesheet' href='./css/luckysheet.css' /><link rel='stylesheet' href='./assets/iconfont/iconfont.css' /><script src="./plugins/js/plugin.js"></script><script src="./luckysheet.umd.js"></script>2、指定表格容器
很简单的，具体代码如下：
<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>3、创建表格
这里，需要通过js来创建一个表格，代码如下：
<script> $(function () {//配置项var options = {container: 'luckysheet' //luckysheet为容器id } luckysheet.create(options) })</script>这样，基本上一个表格便可在你指定的页面生成了，是不是很easy，很方便~
目前，该项目在Github上面有5.3k的关注，见下图：
官方地址：https://github.com/mengshukeji/Luckysheet
确实是一个不错的项目，老鬼准备后面抽时间也引入到自己公司的项目中，反正经过老鬼推荐过的项目或者工具，基本都会大火，笔芯~
最后，推荐给大家一个有趣有料的公众号：程序员Tools，该公众号主要为大家分享有趣有料的开发者工具，还有老鬼给你带路，永不迷路~
扫描关注，永不迷路